<script setup lang="ts">
import { ref } from 'vue'

//
const username = ref('123')
const username2 = ref('456')

const onInput = (event: Event) => {
    // console.log((event.target as HTMLInputElement).value)
    username2.value = (event.target as HTMLInputElement).value
}

// ------------
const gender = ref('男')

const onChange = (event: Event) => {
    gender.value = (event.target as HTMLInputElement).value
}

const selectedCity = ref('')
</script>

<template>
    <input type="text" v-model="username" />
    {{ username }}
    <div>--------------</div>
    <input type="text" :value="username2" @input="onInput" />
    <div>用户名{{ username2 }}</div>
    <div>--------------</div>
    <div>
        <span>请选择性别: </span>
        <!-- <input v-model="gender" type="radio" name="gender" value="男" />男
    <input v-model="gender" type="radio" name="gender" value="女" />女 -->

        <label><input type="radio" name="gender" value="男" @change="onChange" />男</label>
        <label><input type="radio" name="gender" value="女" @change="onChange" />女</label>
        <div>选择的性别是: {{ gender }}</div>

        <div>
            <span>你喜欢的城市: </span>
            <select v-model="selectedCity">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
            </select>
            <p>选择的城市：{{ selectedCity }}</p>
        </div>
    </div>
</template>
